<template>
	<view class="select-supervisor">
		<navBar title="選擇訂單" @goBack="uni.navigateBack()"></navBar>

		<scroll-view @scrolltolower="scrolltolower" scroll-y
			:style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
			<!-- v-if="orderArray.length > 0" -->
			<view style="height: 100%;">
				<view class="search">
					<u-search @search="confirmSearch" @change="confirmSearch" v-model="searchForm.keyWord"
						placeholder="请输入关键字" :showAction="false" :clearabled="false"  height="88upx" />
				</view>
				<u-radio-group v-model="orderId" placement="column">
					<view class="select-supervisor-list">
						<view v-for="(item, index) in orderArray" :key="index">
							<view class="list-item">
								<view>{{item.orderNo || item.orderNo2}}</view>
								<u-radio size="22" shape="circle" :name="item.id" @change="radioChange(item)"></u-radio>
							</view>
						</view>
					</view>
				</u-radio-group>
			</view>
			<u-empty v-if="!orderArray.length" mode="data" text="數據爲空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</scroll-view>
		
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getSystemHeightInfo } from "@/utils/common.js";
	import { hkOrder_list } from "@/api/HongKong/hkAttendanceSheet.js";
	export default {
		name: "select-order",
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				orderArray: [],
				// 分页器
				paging: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
				},
				// 搜索表单
				searchForm: {
					keyWord: "",
				},
				// 是否正在加载中
				isLoading: false,
				orderId: '',
				orderType:''
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		async onLoad(options) {
			if(options && options.type) {
				console.log(options.type, '入口')
				this.orderType = options.type
			}
			this.initContainerData();
			this.orderArray = await this.getOrderList();
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendOrder', (item) => {
				// console.error(item.data)
				this.orderId = item.data
			})
			this.eventChannel = eventChannel
		},
		methods: {
			radioChange(val) {
				console.error(val)
				uni.navigateBack({
					success: () => {
						this.eventChannel.emit("getOrderInfo", {
							data: val
						})
					}
				});
			},
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight } = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight;
			},

			/** 获取列表信息 */
			getOrderList() {
				return new Promise(resolve => {
					const {
						pageNum,
						pageSize
					} = this.paging;
					let resq = {
						currPage: pageNum,
						pageSize,
						params: {
							projectId: uni.getStorageSync('isOwner'),
							orderStates:['zj', 'zt'],
							orderType:this.orderType ? this.orderType : undefined,
							keywords:this.searchForm.keyWord
						},
					}
					hkOrder_list(resq).then(res => {
						const {
							list,
							total
						} = res.result;

						this.paging.total = total;
						resolve(list);
					});
				});
			},

			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if (!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.orderArray = this.orderArray.concat(await this.getOrderList());
					this.isLoading = false;
				}
			},


			/** 确认搜索 */
			async confirmSearch(val) {
				console.log(val,'0--')
				if(!val) {
					this.searchForm.keyWord = ''
				}
				this.paging.pageNum = 1;
				this.orderArray = await this.getOrderList();
			},
		}
	}
</script>

<style scoped lang="scss">
	.select-supervisor {
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;

		/* #endif */
		.search {
			padding: 42upx 36upx 14upx 28upx;
			position: sticky;
			top: 0px;
			border-top: 1px solid #fff;
			background: #fff;
			z-index: 1;
		}

		.u-checkbox-group {
			display: block;
		}

		.checkbox {
			::v-deep .uni-checkbox-input {
				border-radius: 50%;
			}
		}

		.select-supervisor-list {
			padding: 0 36upx 0 28upx;
			color: #445469;
			font-weight: 500;
			width: 100%;

			.list-item {

				padding: 40upx;
				border-bottom: 1px solid #e2e5ed;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			::v-deep .u-radio-group {
				flex: initial;

				.u-radio__icon-wrap {
					margin-right: 0;
				}
			}
		}
	}

	.special-work-personnel-list {
		padding: 0 36upx 0 28upx;
		color: #445469;
		font-weight: 500;

		.list-item {
			/* #ifdef APP-PLUS || H5 */
			padding: 40upx 18upx 34upx 28upx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding: 42upx 36upx 14upx 28upx;
			/* #endif */
			border-bottom: 1px solid #e2e5ed;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.wid-320 {
				/* #ifdef APP-PLUS || H5 */
				width: calc(100% - 44upx);
				/* #endif */

				/* #ifdef MP-WEIXIN */
				width: 640rpx;
				/* #endif */
			}
		}

		::v-deep .u-radio-group {
			flex: initial;

			.u-radio__icon-wrap {
				margin-right: 0;
			}
		}
	}

	.footer-button {
		height: 154upx;

		.button-placeholder {
			height: 100%;
		}

		.button-group {
			height: 154upx;
			padding: 30upx;
			box-sizing: border-box;
			background: #fff;
			position: fixed;
			width: 100vw;
			bottom: 0;
			z-index: 1;

			.button-primary {
				background: #2f80ed;
				border-radius: 4upx;
				color: #fff;
				font-weight: bold;
				line-height: 92upx;
				text-align: center;
			}
		}
	}
</style>